<template>
  <view>
    <view class="tabs-view">
      <view class="keyword-view clearfix">
        <view class="float_left"
          ><u-search
            :show-action="false"
            :clearabled="true"
            placeholder="供应商名称"
            v-model="keyword"
          ></u-search
        ></view>
        <view
          v-if="$accessCheck($Access.SupplierAddSupplier)"
          class="float_right"
          @click="goPage('/pagesT/Purchase/AddSupplier')"
          ><u-icon name="plus" color="#333333" size="40"></u-icon
        ></view>
      </view>
    </view>
    <view class="list-ul" v-if="$accessCheck($Access.SupplierGetAllSupplier)">
      <view
        class="list-li"
        v-for="(item, index) in supplier_list"
        :key="index"
        @click="handleSupplierClick(item)"
      >
        <view class="title clearfix">
          <view class="float_left">{{ item.title }}</view>
          <view class="float_right">
            <text class="success-status" v-if="item.enableStatus === 5"
              >启用</text
            >
            <text class="danger-status" v-else>禁用</text>
            <text class="custom-icon custom-icon-jinru"></text>
          </view>
        </view>
        <view class="list-cont">
          <view class="list-cont-li">编号：{{ item.code || "--" }}</view>
          <view class="list-cont-li clearfix">
            <view class="float_left">联系人：{{ item.realName || "--" }}</view>
            <view
              class="float_right mobile"
              @click.stop="callPhone(item.mobile)"
            >
              {{ item.mobile }}
              <u-icon name="arrow-right" size="24"></u-icon>
            </view>
          </view>
          <view class="list-cont-li clearfix"
            >地区：{{ item.area.provinceName }} {{ item.area.cityName }}
            {{ item.area.districtName }} {{ item.area.address }}</view
          >
        </view>
      </view>
      <view v-if="!supplier_list.length" class="empty-view"
        ><u-empty text="暂无数据" mode="list"></u-empty
      ></view>
      <u-loadmore v-if="supplier_list.length" :status="load_status" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      supplier_list: [],
      load_status: "nomore",
      page: 1,
      pageSize: 10,
      total: 0,
      tabs_current: 0,
      keyword: "",
      source: "", // 新增
    };
  },
  onLoad(options) {
    this.source = options.source || "";
  },
  onShow() {
    this.getAllSupplier();
  },
  onReachBottom() {
    if (this.tab_current === 0) {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getAllSupplier();
      }
    }
  },
  onPullDownRefresh() {
    this.getAllSupplier();
  },
  methods: {
    getAllSupplier() {
      this.$u.api
        .getAllSupplier({
          page: this.page,
          pageSize: this.pageSize,
          keyword: this.keyword,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (this.page === 1) {
            this.supplier_list = res.data;
          } else {
            this.supplier_list = this.supplier_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    handleSupplierClick(item) {
      if (this.source === "2") {
        // 选择供应商并返回
        uni.$emit("supplier-selected", [item]);
        uni.navigateBack();
      } else {
        this.goPage("/pagesT/Purchase/SupplierDetail?id=" + item.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  .keyword-view {
    padding: 20rpx 24rpx;
    .float_left {
      width: 640rpx;
    }
    .float_right {
      line-height: 64rpx;
      width: 50rpx;
      text-align: center;
      color: #666666;
    }
  }
}

.list-ul {
  padding-top: 102rpx;
  .list-li {
    padding: 0 24rpx 20rpx;
    margin-top: 20rpx;
    background-color: #ffffff;
    .title {
      line-height: 80rpx;
      border-bottom: 1px solid #eeeeee;
      .float_left {
        font-weight: bold;
      }
      .float_rigth {
        .custom-icon-jinru {
          margin-left: 10rpx;
          font-size: 28rpx;
        }
      }
    }
    .list-cont {
      margin-top: 10rpx;
      .list-cont-li {
        line-height: 60rpx;
        .mobile {
          color: $uni-color-primary;
        }
      }
    }
  }
}
</style>
